{% extends "templates/web.html" %}

{% block title %}{{ _(title) }}{% endblock %}

{% block header %}
<h1>{{ _(title) }}</h1>
{% endblock %}


{% block breadcrumbs %}
{% if has_header and login_required %}
{% include "templates/includes/breadcrumbs.html" %}
{% endif %}
{% endblock %}

{% block header_actions %}
	{% if not read_only and has_header %}
	<div style="padding-bottom: 15px;">
	    {% if login_required -%}
		<a href="{{ cancel_url or pathname }}" class="btn btn-default btn-sm">
	    	{{ _("Cancel") }}</a>
		{%- endif %}
		{% if not is_list %}
	    <button type="submit" class="btn btn-primary btn-sm btn-form-submit">
	    		{{ _("Save") }}</button>
		{% endif %}
	</div>
	{% endif %}
	{% if is_list %}
	<div style="padding-bottom: 15px;">
	    <a href="/{{ pathname }}{{ delimeter }}new=1{{ params_from_form_dict}}" class="btn btn-primary btn-new btn-sm">
	    {{ _("New") }}
		</a>
		<button class="btn btn-danger btn-delete btn-sm">
			{{ _("Delete") }}
		</button>
	</div>
	{% endif %}
	{%- if allow_print and not is_list and not _login_required and doc.name -%}
	<div class='text-right'>
		<a class='text-muted small' href='/printview?doctype={{ doc.doctype}}&name={{ doc.name }}
			{%- if print_format -%}&format={{ print_format }}{%- endif -%}' target="_blank" rel="noopener noreferrer">
			<i class='fa fa-print'></i> {{ _("Print") }}</a>
	</div>
	{%- endif -%}
{% endblock %}

{% block page_content %}
<div class="introduction">
	{% if introduction_text %}
	<p class="text-muted">{{ _(introduction_text) }}</p>
	{% endif %}
</div>
<div class="form-message hide"></div>

{% if _login_required %}
<div class="login-required">
	<div class="text-muted">
		{{ _("Please sign-up or login to begin") }}
	</div>
	<p>
		<a href="/login?redirect-to=/{{ pathname }}" class="btn btn-primary">
			{{ _("Login") }}
		</a>
	</p>
</div>
{% elif is_list %}
	<div class="list-filters row">
		<script>{% include "templates/includes/list/filters.js" %}</script>
	</div>
	{% if show_in_grid %}
		<div class="web-form-list">
			<div class="results"></div>
			<div class="more-block {% if not show_more -%} hide {%- endif %}">
				<button class="btn btn-default btn-more btn-sm">{{ _("More") }}</button>
			</div>
		</div>
	{% else %}
		{% include "templates/includes/list/list.html" %}
		<script>{% include "templates/includes/list/list.js" %}</script>
	{% endif %}
{% else %}
<br>

<!-- pagination -->
{% if not frappe.form_dict.new and layout|len > 1 %}
<div class="text-center slide-progress text-extra-muted">
	{% for page in layout %}
	<i data-idx="{{ loop.index }}" data-toggle="tooltip" data-placement="top"
		title="{{ _(page.label) or _("Page {0}").format(loop.index) }}" class="fa-fw
		{% if loop.index==1 %}fa fa-circle{% else %}fa fa-circle-o{% endif %}"></i>
	{% endfor %}
</div>
{% endif %}

<div role="form"
	data-web-form="{{ name }}" data-owner="{{ doc.owner }}">
	{% if frappe.form_dict.name and web_page_link_text %}
	<div class="row">
		<div class="col-sm-9">
			<p class="text-muted">
				<a class="btn btn-default btn-sm" href="{{ doc.route }}" target="_blank" rel="noopener noreferrer">
					{{ web_page_link_text }}</a>
			</p>
		</div>
	</div>
	{% endif %}

	{% for page in layout %}
	{% set last_page = True if loop.index == layout|len else False %}
	<div class="web-form-page{% if loop.index > 1 %} hidden{% endif %}"
		data-idx="{{ loop.index }}"
		data-label="{{ page.label or _("Page {0}").format(loop.index) }}">
		{% if page.label %}
			<h2 class='text-center'>{{ _(page.label) }}</h2>
		{% endif %}
		{% if page.description %}
			<p class='text-center text-muted small'>{{ _(page.description) }}</p>
			<br>
		{% endif %}

		<div class="webform-wrapper"></div>

		{% if last_page and accept_payment %}
		<div class="well payment-details" style="margin-top: 15px">
			{% if not doc.paid %}
				{% if payment_button_help %}
				<div class='text-muted' style='padding-bottom: 15px;'>
					{{ payment_button_help }}</div>
				{% endif %}
				<a class="btn btn-primary btn-payment">
					{{ payment_button_label or "Pay"}}</a>
			{% else %}
				<div>{{ _("Payment Complete") }}</div>
			{% endif %}
		</div>
		{% endif %}
		<!-- page footer buttons -->
		<div>
			{% if layout|len > 1 %}
			<p class='text-muted small text-center'>
				{{ _("Page {0} of {1}").format(loop.index, layout|len) }}</p>
			{% endif %}
			<br>
			<p class='text-right'>
				{%- if loop.index > 1 -%}
				<button class='btn btn-sm btn-default btn-change-section'
					data-idx="{{ loop.index - 1 }}">
					{{ _("Previous") }}</button>
				{%- endif -%}
				<!-- save/next button -->
				{% if (loop.index == layout|len or frappe.form_dict.new) %}
					{% if not read_only %}
				    <button type="submit" class="btn btn-primary btn-sm btn-form-submit footer-button">
				    	{{ _("Save") }}</button>
					{% endif %}
				{% elif layout|len > 1 %}
				    <button class="btn btn-primary btn-sm btn-change-section"
						data-idx="{{ loop.index + 1 }}">
				    	{{ _("Next") }}</button>
				{% endif %}
			</p>
		</div>
	</div>
	{% endfor %}

</div>

{% if allow_comments and not frappe.form_dict.new -%}
<div class="comments">
	<br><br>
	<h3>{{ _("Comments") }}</h3>
	{% include 'templates/includes/comments/comments.html' %}
</div>
{%- endif %}
{% endif %}
<div class="padding"></div>
{% endblock %}

{% block script %}
<script type="text/javascript" src="/assets/js/dialog.min.js"></script>
<script type="text/javascript" src="/assets/js/control.min.js"></script>
<script type="text/javascript" src="/assets/js/moment-bundle.min.js"></script>

<script>
window.web_form_settings = {
	allow_incomplete: 	{{ allow_incomplete or 0 }},
	success_link: 		'<p>{{ success_message or _("Your information has been submitted") }}</p><p><a href="{{ success_url or "/" }}" class="btn btn-sm btn-default">{{ _("Continue") }}</a></p>',
	datepicker_format: 	"{{ frappe.date_format }}",
	web_form_doctype: 	"{{ doc_type }}",
	web_form_name: 		"{{ name }}",
	is_new: 			{{ 1 if frappe.form_dict.new else 0 }},
	is_read_only: 		{{ 1 if read_only else 0 }},
	doc_name: 			"{{ frappe.form_dict.name or "" }}",
	login_required: 	{{ 1 if login_required else 0 }},
	max_attachment_size:{{ max_attachment_size }},
	moment_date_format: "{{ frappe.date_format.upper() }}",
	is_list: {{ frappe.utils.cint(is_list) }}
}
frappe.boot = {
	sysdefaults: {
		float_precision: {{ frappe.get_system_settings('float_precision') or 3 }},
		date_format: "{{ frappe.get_system_settings('date_format') or 'yyyy-mm-dd' }}",
	}
};

frappe._messages = {{ translated_messages }};

// for backward compatibility of some libs
frappe.sys_defaults = frappe.boot.sysdefaults;
{% if row_template %}web_form_settings.web_form_row_template = "{{ row_template }}";{% endif %}
</script>

<script type="text/javascript" src="/assets/js/web_form.min.js"></script>
<script>
{% if script is defined %}
{{ script }}
{% endif %}

{% if client_script %}
frappe.init_client_script = () => {
	{{ client_script }}
}
{% endif %}
</script>
{% endblock %}

{% block style %}
<link type="text/css" rel="stylesheet" href="/assets/css/web_form.css">
<style>
{% if style is defined %}{{ style }}{% endif %}
</style>
{% endblock %}
